<template>
	<view>
			<view class="logo"><image src="../../static/common/logo1.png"></image></view>
		<view class="regForm">
			<view >
				<text class="radioStyle" v-if="isUser">真实姓名</text>
			    <input  v-model="userName" placeholder="真实姓名" maxlength="4" /> 
			</view>
			<view>
				<text class="radioStyle" v-if="isLogin">登录账号</text>
				<input :input="verifyLog"  v-model="login.loginName" placeholder="登录账号" maxlength="13" /> </view>
			<view>
				<text class="radioStyle" v-if="isPassword">密码</text>
				<input class="input" v-model="password" :type= "typeName1" placeholder="密码" maxlength="13" />
				<image @tap="changePwdType1()" v-if="isShow" src="../../static/eyes.png" style="width: 50rpx; height: 50rpx;" mode="aspectFit"></image>
				<image @tap="changePwdType1()" v-else src="../../static/eyes2.png" style="width: 50rpx; height: 50rpx;" mode="aspectFit"></image>
			</view>
				
			<view>
				<text class="radioStyle" v-if="isMobilePhone">手机号</text>
				<input v-model="mobilePhone" type="number" placeholder="手机号" maxlength="11" /></view>
			<view class="code">
				<input v-model="mobileCode" :placeholder-style='placeholderStyle' maxlength="6" placeholder="请输入验证码" />
				<button @click="getCodeNum()" type="primary">{{!codeTime?'获取验证码':codeTime+'s'}}</button>
			</view>
			  <view class="toLogin"><text  @tap="toLogin()">已有账号？前往登录</text></view>  
		</view>
		<view class="regPost"><button :disabled="disabled" class="formBut" @click="regPost()">注册</button> </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle:'font-size:30rpx;',
				codeTime:0,
				mobilePhone:'',
				login:{
					loginName:''
				},
				userName:'',
				password:'',
				mobileCode:'',
				disabled:true,
				isLogin:false,
				isUser:false,
				isPassword:false,
				isMobilePhone:false,
				isTrue:false,
				number1: 0,
				isShow: false,
				typeName1: "password",
				logName:'',
				appId:""
			};
		},
		watch: {
			'login.loginName'(val){
				console.log(val)
				setTimeout(() => {
				this.login.loginName=this.login.loginName.replace(/[\W]/g,"");
				         }, 1);
				this.change();
				if(!val){
					this.isLogin = false;
				}
				else{
					this.isLogin = true;
				}
			},
			userName(val) {
				console.log(val)
				this.change();
				if(!val){
					this.isUser = false;
				}
				else{
					this.isUser = true;
				}
			},
			password(val) {
				this.change();
				if(!val){
					this.isPassword = false;
				}
				else{
					this.isPassword = true;
				}
			},
			mobilePhone(val){
				this.change();
				if(!val){
					this.isMobilePhone = false;
				}
				else{
					this.isMobilePhone = true;
				}
			},
			mobileCode(val){
				this.change();
			}
		},
		onReady() {
			this.change();
		},
		methods:{
			verifyLog(e){
				let logName = e.detail.value
				setTimeout(() => {
				this.login.loginName=logName.replace(/[\W]/g,"");
				         }, 1);
				console.log(this.login.loginName)
			},
			changePwdType1 () {
				if(this.number1 === 0) {
					this.isShow = true
					this.number1 ++
					this.typeName1 = "text"
				}else{
					this.isShow = false
					this.number1 --
					this.typeName1 = "password"
				}
			},
			change() {
				if (this.login.loginName && this.userName && this.password &&  this.mobilePhone && this.mobileCode) {
					this.disabled = false;
					return;
				}
				this.disabled = true;
			},
			//前往登录
			toLogin(){
				uni.redirectTo({
					url:"../userLogin/userLogin"
				})
			},
			//验证手机号
			isPhone(){
				let regex = {
				    mobile: /^1[^0|1|2][0-9]{9}$/
				};
				return regex.mobile.test(this.mobilePhone);
			},
			//获取验证码
			getCodeNum(){
				var pinf = plus.push.getClientInfo();
				console.log(pinf);
				this.appid = pinf.token;
				if(this.codeTime > 0){ 
					uni.showToast({
					title:'不能重复获取',
					icon:"none"
				}); return;}
				if(!this.isPhone()){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:"none"
					});
					return;
				}
				this.codeTime = 60;
				let timer = setInterval(()=>{
					this.codeTime--;
					if( this.codeTime < 1){
						clearInterval(timer);
						this.codeTime = 0;
					}
				},1000)
				uni.request({
					url: this.confige.webUrl+"/code/sms",
					data:{
						mobile:this.mobilePhone,
						appId:this.appid
					},
					success: (res) => {
						console.log(res)
						if(res.data.code==401){
							uni.showToast({
								title:res.data.data,
								icon:"none"
							})
						}
					}
				})
			},
			regPost(){
				this.isPhone();
				if(!this.isPhone()){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:"none"
					});
					return;
				}
				uni.request({
					url: this.confige.webUrl+"/register",
					data:{
						login_name:this.login.loginName,
						  password:this.password,
						  phone:this.mobilePhone,
						  smsCode:this.mobileCode,
						  user_name:this.userName
					},
					success:(res)=>{
						console.log(res)
						if(res.data.code==200){
							uni.showModal({
								title:"提示",
								content:"注册成功！",
								showCancel:false,
								 success: function (res) {
										if (res.confirm) {
											uni.redirectTo({
												url:"../userLogin/userLogin"
											})
										}
									}
							})
						}
					    else {
							console.log(111)
							uni.showToast({
								title:res.data.message,
								icon:"none"
							});
						}
					         }
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	@import "../../common/global.less";
	.input {
		text-align: left; 
		width: 100%; 
		height: 100%;
		outline: medium; 
		border: none;
		font-size: 30rpx;
		color: #555555;
		letter-spacing: 4rpx;
	}
	.radioStyle{
		color:#808080;
		min-width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		// border:  1rpx solid #000000;
		}
		.formBut::after {
			  border: none;
			}
.formBut{ border-radius: 90rpx;height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
.regForm{ 
	    transform: translate(0,-20rpx);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		.toLogin{
			display: flex;
			justify-content:flex-end; 
			border-bottom: 0;
			font-size: 30rpx;
			color:#007AFF;	
			}
		>view {
			display: flex;
			width: 70%;
			margin-top: 50rpx;border-bottom: 1rpx solid @bordercolor;
			>input{ padding: 0 0 15rpx 20rpx; }
		}
		// >view:nth-of-type(2){
		// border-bottom:0;
		// radio{ padding-right: 20rpx;}
		// }
		>view:nth-of-type(5){ border-bottom:0;}
	}

.logo{
	height:300rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	image{
		height:140rpx;
		 width:140rpx;
		  // border-radius:100%;
		  }
}
.code {
		display: flex;
		flex-wrap: nowrap;
		>input{ width: 250rpx; border-bottom: 1rpx solid @bordercolor;}
		>button{
			height: 70rpx;
			width: 190rpx;
			margin-left: 20rpx;
			text-align: 70rpx;
			font-size: 25rpx;
			border-radius: 40rpx;
			transform: translate(10rpx,-10rpx);
			border: 2rpx solid #dadada;
		}
		}
	.regPost{ 
		width:70%; margin:20rpx auto ;
	text{ background-color: @maincolor;}
	}
</style>
